<template>
	<div>
	<div class="title">
		猜你喜欢
	</div>
	<div class="item">
		<div class="item-img">
			<img src="http://img1.qunarzz.com/sight/p0/1811/48/481345746fe3ce9fa3.img.jpg_200x200_fbd18714.jpg"/>
		</div>
		<div class="item-info">
			<p class="item-title">长隆欢乐世界</p>
			<p class="item-desc">长隆欢乐世界长隆欢乐世界</p>
			<button class="item-button">查看详情</button>
		</div>
	</div>
	</div>
</template>

<script>
	export default {
		
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	@import "../assets/scss/mixins.scss";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.title{
		margin-top: r(20px);
		line-height: r(80px);
		background: #eee;
		text-indent: r(20px);
		font-size: r(28px);
	}
	.item{
		display: flex;
		width: 100%;
		overflow: hidden;
		height: 0;
		padding-bottom: 31.25%;
		height: r(188px);
		border-bottom: r(2px) solid rgba(0,0,0,.1);
		.item-img{
			width: r(200px);
			height: r(200px);
			>img{
				width: 100%;
				padding: r(10px);
			}
		}
		.item-info{
			flex: 1;
			padding: r(10px);
			min-width: 0;
			.item-title{
				line-height: r(54px);
				font-size: r(32px);
				@include ellipsis();
			}
			.item-desc{
				line-height: r(40px);
				color: #ccc;
				font-size: r(28px);
				@include ellipsis();
			}
			.item-button{
				background: #ff9300;
				padding: 0 r(20px);
				border-radius: r(6px);
				color: #fff;
				font-size: r(28px);
			}
		}
	}
</style>